<template>
    <a-space direction="vertical" :style="{ width: '100%' }">
        <a-upload :fileList="file ? [file] : []" :show-file-list="false" :custom-request="customRequest">
            <template #upload-button>
                <div :class="`arco-upload-list-item${file && file.status === 'error'
                        ? ' arco-upload-list-item-error'
                        : ''
                    }`">
                    <div class="arco-upload-list-picture custom-upload-avatar" v-if="file && file.url">
                        <img :src="file.url" />
                        <div class="arco-upload-list-picture-mask">
                            <IconEdit />
                        </div>
                        <a-progress v-if="file.status === 'uploading' && file.percent < 100" :percent="file.percent"
                            type="circle" size="mini" :style="{
                                position: 'absolute',
                                left: '50%',
                                top: '50%',
                                transform: 'translateX(-50%) translateY(-50%)',
                            }" />
                    </div>
                    <div class="arco-upload-picture-card" v-else>
                        <div class="arco-upload-picture-card-text">
                            <IconPlus />
                            <div style="margin-top: 10px; font-weight: 600">上传</div>
                        </div>
                    </div>
                </div>
            </template>
        </a-upload>
    </a-space>
</template>

<script setup lang="ts">
import { IconEdit, IconPlus } from "@arco-design/web-vue/es/icon";
import { ref, withDefaults, defineProps } from "vue";
import { uploadFileUsingPost } from "@/api/fileController";
import { Message } from "@arco-design/web-vue";

/**
 * 定义组件属性类型
 */
interface Props {
    biz: string;
    onChange?: (url: string) => void;
    value?: string;
}

/**
 * 给组件指定初始值
 */
const props = withDefaults(defineProps<Props>(), {
    value: () => "",
});

const file = ref();
if (props.value) {
    file.value = {
        url: props.value,
        percent: 100,
        status: "done",
    };
}

// 自定义请求
const customRequest = async (option: any) => {
    const { onError, onSuccess, fileItem } = option;

    const res: any = await uploadFileUsingPost(
        { biz: props.biz },
        {},
        fileItem.file
    );
    if (res.data.code === 0 && res.data.data) {
        const url = res.data.data;
        file.value = {
            name: fileItem.name,
            file: fileItem.file,
            url,
        };
        props.onChange?.(url);
        onSuccess();
        console.log(file.value);
    } else {
        Message.error("上传失败，" + res.data.message || "");
        onError(new Error(res.data.message));
    }
};
</script>